<template>
	<view class="mybaobei">
		<myNav>
			<view slot="left" @click="back"><uni-icons type="closeempty" color="#fff"></uni-icons></view>
			<view class="center">完善资料</view>
		</myNav>
		<view class="list" @click="index = 1" :class="index == 1 ? 'active' : ''">
			<label for="i1">真实姓名*</label>
			<input id="i1" class="fl1" type="text" />
		</view>
		<view class="list" @click="index = 2" :class="index == 2 ? 'active' : ''">
			性别*
			<input class="fl1" type="text" />
		</view>
		<view class="list" @click="index = 3" :class="index == 3 ? 'active' : ''">
			手机*
			<input class="fl1" type="text" />
		</view>
		<view class="list" @click="index = 4" :class="index == 4 ? 'active' : ''">
			微信*
			<input class="fl1" type="text" />
		</view>
		<view class="list" style="padding-left: 30px;">
			联名客户
			<uni-icons type="plus-filled" color="#009df9" size="24"></uni-icons>
		</view>
		<view class="list" style="padding-left: 30px;" @click="showTag">
			标签
			<uni-icons type="plus-filled" color="#009df9" size="24"></uni-icons>
		</view>
		<view class="list" style="padding-left: 30px;">
			备注信息
			<input type="text" value="" style="font-size: 14px;" placeholder-class="shrumoren1" placeholder="输入内容" />
		</view>
		<view class="list nono">
			<view class="t">
				核心信息添加
			</view>
			<view class="c">
				客户来源: 来电
			</view>
			<image class="f" src="../../static/all/dengji/zhankai.png" mode=""></image>
		</view>
		<view class="list nono b">
			<view class="t">
				其他信息
			</view>
			<view class="c ">
				意向产品：高层住宅
			</view>
			<image class="f" src="../../static/all/dengji/zhankai.png" mode=""></image>
		</view>
		<view class="btn" style="margin-top: 50px;">保存</view>
		<uni-drawer :visible="show" mode="right" @close="chu">
			<view style="mask-content">
				<view class="mask-top"><input type="text" value="" placeholder="请输入标签" /></view>
				<view class="mask-bottom">
					<view class="list-1">
						<view class="title">
							<text>我的标签</text>
							<text class="c" @click="promptVisible = true">管理标签</text>
						</view>
						<view class="item-1">
							<view class="text" :class="mytagindex === index ? 'active' : ''" @click="mytagindex = index" v-for="(item, index) in 30" :key="index">验货</view>
						</view>
					</view>
					<view class="list-1">
						<view class="title">
							<text>大家用的标签</text>
							<!-- <text>管理标签</text> -->
						</view>
						<view class="item-1"><view class="text">验货</view></view>
					</view>
				</view>
				<view class="queding" @click="queding">确定</view>
			</view>
		</uni-drawer>
		<prompt :visible.sync="promptVisible" placeholder="输入标签" @confirm="clickPromptConfirm" mainColor="#e74a39"><!-- 这里放入slot内容--></prompt>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import Prompt from '@/components/zz-prompt/index.vue';
import myNav from '../../components/mynav/mynav.vue';
import { visitor } from '@/api/index.js';
import { MyShow } from '@/util/my.js';
export default {
	components: { myNav, Prompt },
	data() {
		return {
			index: 1,
			promptVisible: false,
			biaoqian: '', //用户自定义标签输入内容
			list: [false, false, false, false, false],
			show: false,
			mytagindex: '',
			info: {
				name: '',
				sex: '',
				number: '',
				linkedGuest: {
					name: '',
					sex: '',
					number: ''
				},
				tag: []
			}
		};
	},
	methods: {
		...mapMutations(['back']),
		tuichu() {
			uni.navigateTo({
				url: '../zhuce/zhuce'
			});
		},
		changeduoxuan(e){
			console.log(e.mp.detail)
		},
		chu(e) {
			this.show = false;
		},
		showTag() {
			//
			this.show = true;
		},
		changelist(val) {
			this.list[val] = !this.list[val];
			this.list = [...this.list];
		},
		clickPromptConfirm(e) {
			// console.log(e)
			this.biaoqian = e;
			this.promptVisible = false;
		},
		async queding() {
			//去请求接口
			//  todo 字段自己填充吧
			// console.log('去请求接口');
			try {
				let reslut = await visitor(this.info);
				//成功
				new MyShow('需要渲染的字段').tixing();
			} catch (e) {
				//TODO handle the exception
				new MyShow('需要渲染的字段').tixing();
			}
			this.show = false;
		},
		goto(val) {
			switch (+val) {
				case 1:
					uni.navigateTo({
						url: './p10'
					});
					break;
				case 2:
					break;
				case 3:
					break;
				case 4:
					break;
				default:
					break;
			}
		}
	}
};
</script>

<style lang="scss">
@import './main.scss';
.myright {
	display: flex;
	flex-direction: column;
	image {
		width: 20px;
		height: 20px;
	}
	margin-top: 40px;
	align-items: center;
	color: #ffffff;
	text {
		margin-top: 5px;
	}
}
</style>
